@import './variable.scss';

::v-deep .supplies-dialog {
  height: 70%;
  background-color: #1a4969;
  opacity: 0.97;

  .el-dialog__header {
    padding: px(10) px(20);
    text-align: center;
    .el-icon-close,
    .el-dialog__title {
      color: #fff;
      font-size: px(18);
      line-height: px(24);
      height: px(24);
    }
  }

  .el-dialog__body {
    padding: px(10) px(20) 0;
    height: calc(100% - #{px(106)});

    .el-form {
      height: 100%;
      .el-form-item__error{
        font-size: px(12);
        line-height: px(20);
        padding: 0;
      }
      .el-form-item {
        margin-bottom: px(22);
        margin-right: px(10);
        &__content {
          color: #fff;
          line-height: px(34);
        }
        &__label {
          color: #fff;
          line-height: px(32);
          font-size: px(16);
          color: #fff;
          width: px(150);
        }
        .el-input__inner {
          width: px(200);
          height: px(32);
          line-height: px(32);
          background-color: #1a4969;
          border: 1px solid rgba(gray, 0.8);
          color: #fff;
          font-size: px(16);
        }
        .el-select .el-input__inner{
          height: px(32) !important;
        }
        .el-select .el-input .el-select__caret,.el-input .el-input__clear{
          font-size: px(14);
        }
        .el-select .el-input__icon{
          line-height: px(32)
        }
      }
      .el-textarea__inner {
        font-size: px(14);
        width: px(540);
        background-color: #1a4969;
        border: 1px solid rgba(gray, 0.8);
        color: #fff;
      }
    }

    .person-scrollbar {
      width: 100%;
      height: calc(100% - #{px(180)});
    }

    .person-scrollbar__wrap {
      width: auto;
      overflow-x: hidden;
      // margin-right: -15px !important;
    }

    .el-divider {
      margin: px(14) 0;

      &__text {
        background-color: #1a4969;
        color: #fff;
        font-style: oblique;
        font-size: px(12);
      }
    }

    .tools {
      .person-rule {
        color: #f56c6c;
        margin-left: px(20);
        font-size: px(12);
      }
    }

    .person-item {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: px(5);
      padding-bottom: px(10);
      border-bottom: 1px solid rgba(#fff, 0.5);

      .operation {
        margin-left: px(40);
        color: #409eff;
        cursor: pointer;

        .svg-icon {
          width: px(30);
          height: px(30);
        }
      }

      .person-pic {
        width: px(100);
        min-width: px(100);
        height: px(120);
        margin: 0 px(20);

        .el-upload {
          width: 100%;
          height: 100%;
        }

        // background-color: grey;
        border: 1px solid gray;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .el-form-item__label{
        width: px(80);
      }

      .el-input__inner {
        width: px(160) !important;
      }
    }
  }

  .el-dialog__footer {
    padding: px(20) px(30) px(10);
  }

  .el-button {
    background-color: #1a4969;
    color: #fff;
    height: px(32);
    width: px(70);
    font-size: px(14);
    border-radius: px(5);
    padding: 0;
    &:hover {
      background-color: #409eff;
    }
  }
}